<template>
  <div class="pet-center">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>宠物中心</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 顶部概览 -->
    <el-header class="overview-header">
      <div class="pet-profile">
        <img :src="currentPet.avatar" class="pet-avatar">
        <div class="pet-info">
          <h2>{{ currentPet.name }}</h2>
          <p>{{ currentPet.breed }} | {{ currentPet.age }}岁</p>
        </div>
      </div>
      <el-button type="primary" @click="switchPet">切换宠物</el-button>
    </el-header>

    <div class="shortcut-links">
      <el-button type="primary" plain @click="goTo('pet-info')">宠物信息</el-button>
      <el-button type="primary" plain @click="goTo('event-reminders')">事件提醒</el-button>
      <el-button type="primary" plain @click="goTo('consult-container')">咨询中心</el-button>
      <el-button type="primary" plain @click="goTo('appointment-container')">预约中心</el-button>
      <el-button type="primary" plain @click="goTo('health-detection')">健康检测</el-button>
    </div>

    <!-- 健康数据概览 -->
    <el-row :gutter="20" class="health-overview">
      <el-col :span="8">
        <el-card>
          <div slot="header">健康指标</div>
          <div class="health-metric">
            <div class="metric-item">
              <span class="label">体重</span>
              <span :class="['value', weightStatus]">
                {{ latestHealth.weight }}kg
                <i v-if="weightStatus" :class="statusIcon(weightStatus)"></i>
              </span>
            </div>
            <div class="metric-item">
              <span class="label">体温</span>
              <span :class="['value', tempStatus]">
                {{ latestHealth.temperature }}°C
                <i v-if="tempStatus" :class="statusIcon(tempStatus)"></i>
              </span>
            </div>
            <el-progress
                type="dashboard"
                :percentage="activityPercent"
                :color="activityColor">
              <span class="activity-text">
                {{ latestHealth.activity }}h/日
              </span>
            </el-progress>
          </div>
        </el-card>
      </el-col>

      <!-- 预约信息 -->
      <el-col :span="8">
        <el-card>
          <div slot="header">
            <span>近期预约</span>
            <el-button type="text" @click="goToAppointments">查看全部</el-button>
          </div>
          <el-timeline>
            <el-timeline-item
                v-for="(appoint, index) in upcomingAppointments"
                :key="index"
                :timestamp="appoint.time">
              {{ appoint.type }} - {{ appoint.status }}
              <el-tag :type="appointTagType(appoint.status)">
                {{ appoint.status }}
              </el-tag>
            </el-timeline-item>
          </el-timeline>
        </el-card>
      </el-col>

      <!-- 咨询记录 -->
      <el-col :span="8">
        <el-card>
          <div slot="header">
            <span>最新咨询</span>
            <el-button type="text" @click="goToConsults">历史记录</el-button>
          </div>
          <div class="consult-list">
            <div v-for="consult in recentConsults" :key="consult.id" class="consult-item">
              <div class="consult-header">
                <span class="date">{{ consult.date }}</span>
                <el-tag size="mini" :type="consult.status === '已回复' ? 'success' : 'info'">
                  {{ consult.status }}
                </el-tag>
              </div>
              <p class="content">{{ consult.content }}</p>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 综合数据图表 -->
    <el-card class="comprehensive-chart">
      <div slot="header">
        <span>健康趋势分析</span>
        <el-radio-group v-model="chartType" size="small">
          <el-radio-button label="weight">体重变化</el-radio-button>
          <el-radio-button label="temperature">体温趋势</el-radio-button>
          <el-radio-button label="activity">活动时长</el-radio-button>
        </el-radio-group>
      </div>
      <div id="trendChart" style="height: 400px;"></div>
    </el-card>

    <!-- 异常提醒 -->
    <el-alert
        v-if="hasAbnormal"
        :title="abnormalTitle"
        type="error"
        :description="abnormalDetails"
        show-icon
        closable
        class="abnormal-alert">
      <el-button type="text" @click="showAbnormalDetail">查看详情</el-button>
    </el-alert>
  </div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  data() {
    return {
      currentPet: {
        id: 1,
        name: '豆豆',
        breed: '金毛寻回犬',
        age: 3,
        avatar: require('@/assets/images/img.png')
      },
      chart: null,
      chartType: 'weight',
      // 模拟数据
      healthData: [
        { date: '2023-08-01', weight: 28.5, temperature: 38.5, activity: 3.2 },
        { date: '2023-08-05', weight: 28.8, temperature: 38.7, activity: 2.8 },
        { date: '2023-08-10', weight: 29.1, temperature: 39.0, activity: 2.5 }
      ],
      appointments: [
        { id: 1, type: '疫苗预约', time: '2023-08-15 10:00', status: '待完成' },
        { id: 2, type: '年度体检', time: '2023-08-20 14:30', status: '已确认' }
      ],
      consults: [
        { id: 1, date: '2023-08-12', content: '最近食欲不振怎么办？', status: '已回复' },
        { id: 2, date: '2023-08-14', content: '疫苗后出现轻微发热', status: '待回复' }
      ]
    }
  },
  computed: {
    latestHealth() {
      return this.healthData[this.healthData.length - 1] || {}
    },
    weightStatus() {
      const w = this.latestHealth.weight
      return w < 25 ? 'low' : w > 30 ? 'high' : ''
    },
    tempStatus() {
      const t = this.latestHealth.temperature
      return t < 38 ? 'low' : t > 39 ? 'high' : ''
    },
    activityPercent() {
      return Math.min((this.latestHealth.activity / 4) * 100, 100)
    },
    activityColor() {
      return this.activityPercent >= 80 ? '#67C23A'
          : this.activityPercent >= 50 ? '#E6A23C'
              : '#F56C6C'
    },
    upcomingAppointments() {
      return this.appointments.slice(0, 3)
    },
    recentConsults() {
      return this.consults.slice(0, 2)
    },
    hasAbnormal() {
      return this.weightStatus || this.tempStatus
    },
    abnormalTitle() {
      const alerts = []
      if (this.weightStatus) alerts.push('体重异常')
      if (this.tempStatus) alerts.push('体温异常')
      return `${alerts.join('、')}预警`
    },
    abnormalDetails() {
      const details = []
      if (this.weightStatus === 'low') details.push('体重低于正常范围')
      if (this.weightStatus === 'high') details.push('体重高于正常范围')
      if (this.tempStatus === 'low') details.push('体温低于正常值')
      if (this.tempStatus === 'high') details.push('体温高于正常值')
      return `检测到：${details.join('，')}，建议及时处理`
    }
  },
  mounted() {
    this.initChart()
  },
  methods: {
    statusIcon(status) {
      return status === 'high' ? 'el-icon-warning-outline' : 'el-icon-warning'
    },
    appointTagType(status) {
      const map = {
        '待完成': 'warning',
        '已确认': 'success',
        '已取消': 'info'
      }
      return map[status] || ''
    },
    initChart() {
      this.chart = echarts.init(document.getElementById('trendChart'))
      this.updateChart()
    },
    updateChart() {
      const option = {
        tooltip: { trigger: 'axis' },
        xAxis: {
          type: 'category',
          data: this.healthData.map(d => d.date)
        },
        yAxis: { type: 'value' },
        series: [{
          data: this.healthData.map(d => d[this.chartType]),
          type: 'line',
          smooth: true,
          areaStyle: {},
          markLine: {
            data: [
              { type: 'average', name: '平均值' },
              this.chartType === 'weight' ? [
                { yAxis: 25, name: '最低标准' },
                { yAxis: 30, name: '最高标准' }
              ] : []
            ]
          }
        }]
      }
      this.chart.setOption(option)
    },
    switchPet() {
      // 切换宠物逻辑
    },
    goToAppointments() {
      this.$router.push('/appointments')
    },
    goToConsults() {
      this.$router.push('/consults')
    },
    showAbnormalDetail() {
      this.$router.push('/health-detail')
    },
    goTo(path) {
      this.$router.push(`/${path}`)
    }
  },
  watch: {
    chartType() {
      this.updateChart()
    }
  }
}
</script>

<style scoped>
.pet-center {
  padding: 20px;
}

.overview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
  padding: 20px;
  margin-bottom: 20px;
}

.pet-profile {
  display: flex;
  align-items: center;
}

.pet-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-right: 20px;
}

.health-metric {
  padding: 10px;
}

.metric-item {
  display: flex;
  justify-content: space-between;
  margin: 15px 0;
}

.label {
  color: #909399;
}

.value {
  font-weight: bold;
}

.value.low { color: #409EFF; }
.value.high { color: #F56C6C; }

.activity-text {
  display: block;
  text-align: center;
  margin-top: -30px;
}

.consult-list {
  max-height: 300px;
  overflow-y: auto;
}

.consult-item {
  padding: 10px 0;
  border-bottom: 1px solid #ebeef5;
}

.consult-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}

.date {
  color: #909399;
  font-size: 0.9em;
}

.content {
  color: #606266;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.abnormal-alert {
  margin-top: 20px;
}

.comprehensive-chart {
  margin-top: 20px;
}

.shortcut-links {
  margin-top: 20px;
  display: flex;
  justify-content: space-around;
  padding: 20px;
}


@media (max-width: 768px) {
  .el-col {
    margin-bottom: 20px;
  }

  .overview-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .pet-profile {
    margin-bottom: 15px;
  }
}
</style>